<template>
	<view class="susBtn">


		<view v-if="styles.status == 1 ? true : false" :class="[styles.type == left ? 'product_one' : 'product_two']" :style="{ top: styles.shifting }">
			<view v-for="(item, index) in styles.imgUrl" :key="index">
				<image :src="item.img == '' ? img : item.img" mode="aspectFill"></image>
			</view>
		</view>

	</view>

</template>
<script>
	export default {
		name: 'susBtn',
		data() {
			return {
				img: '../../../static/tubiao/xuanfu.png'
			};
		},

		props: ['styles'],
		mounted() {

		}
	};
</script>
<style lang="scss" scoped>
	.product_one {
		width: 150upx;
		position: fixed;
		bottom: 100upx;
		right: 0;
		z-index: 9999;

		&>view {
			width: 80upx;
			height: 80upx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 50%;
			margin-top: 10px;
			margin-bottom: 10px;
			border: 1px solid #999;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80upx;
				height: 80upx;
				margin: 0 auto;
			}
		}
	}

	.product_two {
		width: 200upx;
		position: fixed;
		// background: #F5F5F5;
		left: 0;
		bottom: 100upx;
		z-index: 9999;

		&>view {
			width: 160upx;
			height: 160upx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 50%;
			margin-top: 10px;
			margin-bottom: 10px;
			border: 1px solid #999;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80upx;
				height: 80upx;

				margin: 0 auto;
			}
		}
	}
</style>
